<!-- 新增运费 -->
<template>
  <div>
    <el-dialog
      :title="titleInfo.text"
      :visible.sync="dialogFormVisible"
      width="600px"
      @close="resetFormData"
    >
      <el-form
        ref="dataForm"
        :rules="ruleInline"
        :model="formBase"
        label-position="right"
        label-width="110px"
        style="width: 100%"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select v-model="formBase.templateType" placeholder="请选择模板类型" clearable>
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select v-model="formBase.transportType" placeholder="请选择运送类型" clearable>
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联城市"
          prop="associatedCityList"
        >
          <label v-if="formBase.id">
            <template >
              <span v-if="formBase.associatedCityList == 1">全国</span>
              <span v-else-if="formBase.associatedCityList == 2">京津翼</span>
              <span v-else-if="formBase.associatedCityList == 3">江浙沪</span>
              <span v-else-if="formBase.associatedCityList == 4">川渝</span>
              <span v-else-if="formBase.associatedCityList == 5">黑吉辽</span>
            </template>
          </label>
          <el-select
            v-model="formBase.associatedCityList"
            placeholder="请选择关联城市"
            clearable
            multiple
            v-else
          >
            <el-option label="全国" :value="1" />
            <el-option label="京津翼" :value="2" />
            <el-option label="江浙沪" :value="3" />
            <el-option label="川渝" :value="4" />
            <el-option label="黑吉辽" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input v-model="formBase.firstWeight" placeholder="请输入首重价格" />
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input v-model="formBase.continuousWeight" placeholder="请输入续重价格" />
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input v-model="formBase.lightThrowingCoefficient" placeholder="请输入轻抛系数" />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="createData"
          type="danger"
        >确认
        </el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { freightManageAdd } from '@/api/freight-manage'

export default {
  name: 'FreightAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    },
    agencyOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      // 表单验证
      ruleInline: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],
        associatedCityList: [
          { required: true, message: '关联城市不能为空', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      },
      flag: true
    }
  },
  methods: {
    // 弹层关闭时重置表单数据
    resetFormData() {
      this.$refs['dataForm'].resetFields()
      // 其他数据重置操作
    },
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    },
    // 表单提交
    createData() {
      if (!this.flag) {
        return
      }
      this.flag = false
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          console.log(this.formBase)
          const data = this.formBase
          if (this.formBase.id) {
            await freightManageAdd(data)
              .then((res) => {
                this.dialogFormH()
                if (String(res.code) === '200') {
                  this.$message.success('运费修改成功')
                  this.$emit('resetForm', this.formBase)
                } else {
                  this.$message.error(res.msg || '运费修改失败')
                }
                this.flag = true
              })
              .catch((err) => {
                this.$message.error(err.msg || '运费修改失败')
              })
          } else {
            console.log(data, 1111)
            await freightManageAdd(data)
              .then((res) => {
                if (String(res.code) === '200') {
                  this.$message.success('新增运费成功')
                  this.$emit('resetForm', this.formBase)
                  this.dialogFormH()
                } else {
                  this.$message.error(res.msg || '运费新增失败')
                }
                this.flag = true
              })
              .catch((err) => {
                this.$message.error(err.msg || '新增运费失败')
              })
          }
        } else {
          this.flag = true
          this.$message.error('请按照提示填写!')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-form-dialog {
  ::v-deep .el-dialog__body {
    padding: 40px 66px 0 50px !important;
  }
}
</style>
